<template>
    <n-card class="coupon" :class="{ 'coupon-disabled': isgetcoupon }">
        <h4>￥{{ item.price }}</h4>
        <p>适用{{ o[item.type] }}：{{ item.value.title }}</p>
        <p class="!text-xs mt-3">
            有效期：
            <n-time :time="new Date(item.start_time)"/>
            ~
            <n-time :time="new Date(item.end_time)"/>
        </p>
        <template #footer>
            <div class="flex justify-end">
                <n-button 
                size="small"
                :type="isgetcoupon ? '' : 'warning'"
                :disabled="isgetcoupon"
                :loading="loading"
                @click="submit">
                    {{ isgetcoupon ? "已领取" : "立即领取" }}
                </n-button>
            </div>
        </template>
    </n-card>
</template>
<script setup>
import {
    NCard,
    NButton,
    NTime,
    createDiscreteApi
} from "naive-ui"

const o = {
    course:"课程",
    column:"专栏"
}

const props = defineProps({
    item:Object
})

const isgetcoupon = ref(props.item.isgetcoupon)

const loading = ref(false)
const submit = ()=>{
    const { message } = createDiscreteApi(["message"])
    if(isgetcoupon.value){
        return message.error("你已经领取过了")
    }
    useHasAuth(async ()=>{
        loading.value = true
        const {
            data,
            error
        } = await useReceiveUserCouponApi({
            coupon_id:props.item.id
        })

        loading.value = false

        if(error.value) return

        message.success("领取成功")

        isgetcoupon.value = true

    })
}

</script>
<style>
.coupon {
    @apply mb-5 !bg-orange-500 !border-0;
}
.coupon h4 {
    @apply text-2xl mb-2 font-bold text-white;
}
.coupon p{
    @apply text-sm text-light-300;
}
.coupon-disabled {
    @apply !bg-gray-300;
}
</style>